<template>
	<!-- 验证码登录 -->
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<view class="title-contents"><view class="top-view status"></view></view>
		<!-- #endif -->
		<view class="login-title">
			<view class="logo"><image src="/static/images/common/logo.png" mode=""></image></view>
		</view>
		<!-- 密码登录 -->
		<view class="login-phone form-wapper">
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-shouji"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" type="number" placeholder="请输入手机号" v-model="username"/></view>
			</view>
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-yanzhengma"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" type="number" placeholder="请输入验证码" v-model="vercode"/></view>

				<view >
					<button type="default" @click="sendSms">{{code_text}}</button>
				</view>
			</view>
		</view>

		<button type="primary" class="login-btn" @click="codeLogin">登录</button>

	</view>
</template>
<script>

export default {
	data() {
		return {
			username: '',
			vercode: '',
			codeButDisabled: false,
			code_text: '发送验证码',
			host: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
		};
	},
	onLoad() {},
	methods: {
		codeLogin() {
			if (this.username == '') {
				console.log('请输入手机号');
				return false;
			}
			let reg =/^1[3-9]\d{9}$/;
			if (!reg.test(this.username)) {
				console.log('手机号格式不正确');
				return false;
			}
			if (this.vercode == '') {
				console.log('请获取验证码');
				return false;
			}
			let regcode =/^\d{6}$/;
			if (!regcode.test(this.vercode)) {
				console.log('验证码格式不正确');
				return false;
			}
			uni.request({
				url: this.host + '/user/code_login',
				method:'POST',
				data:{
					username:this.username,
					vercode:this.vercode
				},
				success: res => {
					console.log(res);
					if (res.data.code == 0) {
						uni.$u.toast('登录成功')
						localStorage.setItem('token',res.data.token);
						localStorage.setItem('tokenExpired',res.data.tokenExpired);
						localStorage.setItem('uid',res.data.uid);
						localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo))
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/index/index'
							})
						},500)
					} else {
						uni.$u.toast(res.data.msg)
					}
				},
				fail: () => {
					console.log('code_login错误');
				}
			});
		},
		sendSms(){
			uni.request({
				url: this.host + '/user/sendSms',
				method:'POST',
				data:{
					mobile:this.username,
					type:'login'
				},
				success: res => {
					console.log(res);
					if (res.data.code == 0) {
						// 发送成功
						// console.log(`短信已经发送到手机号${this.username},请注意查收`);
						uni.$u.toast(res.data.msg)
								
						// 倒计时
						let count =10;
						let timer=setInterval(()=>{
							count--
							this.code_text=`${count}s后再次获取`;
							if(count<=0){
								// 倒计时结束 清除计时器  让按钮恢复成可点击的状态
								clearInterval(timer);
								this.code_text="再次发送"
								this.codeButDisabled=false;
								count=10
							}
						},1000)
						// this.code_text="再次发送";
					} else{
						uni.$u.toast(res.data.msg)
						console.log('失败');
						this.codeButDisabled=false;
						this.code_text="再次发送";
					}
				},
				fail: () => {
					console.log('sendSms失败');
				}
			});
		}
	}
};
</script>
<style lang="scss">
@import  "login.scss"
</style>
